<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // this 的绑定规则

        // 1. 全局上下文
        console.log(this === window) // true

        // 2.函数调用
        function foo(){
            // 当一个函数被调用(不是作为方法，构造器或者通过call,apply,bind调用)，非严格模式下指向全局对象window,严格模式下undefined
            console.log(this); // window
        }
        foo()

        // 3.方法调用
        const obj = {
            name: '李华',
            greet: function(){
                console.log(`hellow, ${this.name}`);
            }
        }
        // 当函数greet作为一个对象obj的方法被调用时，this 指向该对象。
        obj.greet() //this指向 obj

        // 4. 构造器调用--this 指向新创建的实例
        function Person(name){
            console.log('this',this); // this 指向新创建的实例
            
            this.name = name
        }
        const person1 = new Person('Bob')
        console.log(person1.name); //  Bob
        

        // 5 call、apply 和 bind--this 指向允许显式地指定 this 的值


        // 6 箭头函数
        const obj2 = {
            name: "Alice",
            greet: () => {
                console.log('this',this); // 没有自己的 this 绑定，它会捕获其所在上下文的 this 值
                console.log(`Hello呀, ${this.name}`); // 这里的 this 不是指 obj
            }
        };
        obj2.greet();
        // var name = '里斯' // 假如没有这个 ，上面的 console.log(`Hello呀, ${this.name}`); 就是Hello呀，后面没有值
    </script>
</body>
</html>